/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  src: local('Lato Hairline'), local('Lato-Hairline'), url(S6u8w4BMUTPHh30AUi-qJCY.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  src: local('Lato Hairline'), local('Lato-Hairline'), url(S6u8w4BMUTPHh30AXC-q.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 200;
  src: local('Titillium Web ExtraLight'), local('TitilliumWeb-ExtraLight'), url(NaPDcZTIAOhVxoMyOr9n_E7ffAzHGIVzY4SY.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 200;
  src: local('Titillium Web ExtraLight'), local('TitilliumWeb-ExtraLight'), url(NaPDcZTIAOhVxoMyOr9n_E7ffAzHGItzYw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html{
    font-size: 14px;
    line-height: 20px;
}
body{
    margin: 0;
    color:rgb(230, 230, 230);
    background-color: rgb(51, 51, 51);
    background-image: url("../wallpaper/1.webp");
    background-size: cover;
}
button{
    border: none;
    background: none;
}
.save{
    padding: 1.1rem 3.5rem;
    margin: 1rem 0;
    background: #111;
    color: #f5f5f5;
    border-radius: 2px;
    font-size: 1.3rem;
    transition: all .2s ease;
}
label{
    display: block;
    padding: 6px 0 4px 0;
}
input, select{
    width: 100%;
    padding: 5px 8px;
    height: 30px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    background: #FFFFFF;
    border-radius: 2px;
    border: 1px solid #333;
    font-size: 1rem;
    box-sizing: border-box;
    color: #666;
}
input::-webkit-input-placeholder{color: #CCC;}
input::-moz-placeholder{color: #CCC;}
input:-ms-input-placeholder{color: #CCC;}
select{
    width: 130px;
}
fieldset{
    border: none;
    padding: 0;
}
.fl{
    float: left;
}
.fr{
    float: right;
}
aside{
    position: fixed;
    z-index: 10;
    right: 0;
    top: 0;
    display: inline-block;
    width: 320px;
    padding: 20px;
    background-color: #222;
}
#power{
    position: fixed;
    left: 4px;
    bottom: 4px;
    font-size: .8rem;
    color: #999;
}
#slogan{
    color: #FFF;
    font-size: 7vh;
    text-align: center;
    font-family: "楷体";
    height: 20vh;
    line-height: 20vh;
}
.btn-setting{
    display: inline-block;
    position: fixed;
    right: 16px;
    top: 16px;
    z-index: 20;
    cursor: pointer;
}
.search{
    width: 600px;
    margin: 0 auto;
    padding-bottom: 16vh;
}
.search input{
    background: #FFF;
    border: none;
    border-radius: 3px;
    padding: 16px;
    margin: 0;
    font-size: 1.2em;
    height: auto;
}
.search input:focus{
    outline: none;
}
#suggest{
    background: #FFF;
    width: 568px;
    border-radius: 3px;
    padding: 16px;
}
.search form{
    position: relative;
}
.search button{
    position: absolute;
    right: 0;
    top: 10px;
}
.search button svg{
    height: 1.6rem;
}
#clock{
    display: block;
    text-align: center;
    margin: 20px auto;
    color: #ccc;
    font-size: 2rem;
}
#clock span{
    font-size: 10vh;
    font-family: 'Lato', sans-serif;
}
#date{
    display: block;
    text-align: center;
    font-size: 1.6rem;
    font-family: 'Titillium Web', sans-serif;
}
/*人生日历部分*/
#lifeCalendar{
    position: fixed;
    bottom: 10px;
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 90vw;
}
#lifeCalendar dl{
    display: inline-block;
    margin-right: 1px;
    width: 2vh;
}
#lifeCalendar dl dt{
    display: block;
    overflow: hidden;
    text-align: center;
    writing-mode: vertical-lr;
    font-size: 15px;
    position: relative;
    height: 38px;
    color: #ccc;
}
#lifeCalendar dl dd{
    position: relative;
    height:2vh;
    width: 2vh;
    border-radius: 1vh;
    background-color: #E65100;
    margin-top: 1px;
    left: -38px;
}
.pass{
    opacity: 0.2;
}
/*人生钟表部分*/
#lifeClock{ width: 240px; height: 240px; border:10px solid #8bf2f1;margin:100px auto; border-radius: 50%;
    box-shadow: 0px 0px 20px 3px #444 inset; position: relative;}
/*原点*/
.origin{ width: 16px; height: 16px; border-radius: 50%; background: #000; top:110px; left: 110px; position: absolute;}
/* 指针 */
.clock_line{position: absolute; z-index:20;}
.hour_line{width:60px;height:4px;top:116px;left:120px;background-color:#000;border-radius:2px;
    transform-origin:0 50%;}
.minute_line{width:75px;height:2px;top:119px;left:114px;background-color:#000;
    transform-origin:7.692% 50%;}
.second_line{width:110px;height:1px;top:119.5px;left:118px;background-color:#f60;
    transform-origin:11.765% 50%;}

.dot_box{width: inherit; height: inherit;}
/*时钟数*/
.dot{
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 22px;
    position: absolute;
}
.clock-scale{
    width:115px;
    height:2px;
    transform-origin:0% 50%;
    z-index:7;
    position:absolute;
    top:120px;
    left:100px;
}
.scale-show{ width:12px;height:2px;background-color:#555;float:left;}
.scale-hidden{width:183px;height:2px;float:left;}
/*日期*/
#lifeClockInfo{
    width:160px;
    text-align:center;
    position:absolute;
    top:156px;
    left:43px;
    z-index:11;
    color:#FFF;
}